<template>
    <div class="wrap">

        <!-- 头部 -->
        <div class="header">
            <p>消息</p>
            <a href="">···</a>
        </div>
        
        <!-- 消息列表 -->
        <ul class="msgList">    
            <!-- v-for遍历历史消息记录，获取账号Id对应的信息并且动态渲染 -->
            <router-link 
                v-for="session in sessionList" :key="session.conversationID"
                :to="{
                    name:'msgDetail',
                    params:{
                        id:session.conversationID.slice(3),
                        lastTime:new Date(session.lastMessage.lastTime*1000).toLocaleDateString()
                    }
                }" >
                
                <MessageCard 
                    :userID="session.conversationID.slice(3)"
                    :msgForShow="session.lastMessage.messageForShow"
                    :time="new Date(session.lastMessage.lastTime*1000)"    
                    :payload="session.payload">
                </MessageCard>  
            </router-link>

        </ul>

        <!-- 提示 -->
        <!-- <div class="tip">
            <p>下面没有啦</p>
        </div> -->

        <!-- 占位盒:用于显示提示 -->
        <div class="placeHolder">
        </div>

        <CommonNav></CommonNav>
    </div>
    
</template>
    
<script setup>
    import CommonNav from "@/components/CommonNav.vue";
    import MessageCard from "@/components/message/MessageCard.vue";
    import {reactive} from 'vue'
    import { useStore } from "vuex";

    const store = useStore();
    //会话列表
    let sessionList = reactive(store.state.session.conversationList);
    
</script>
    
<style lang="scss" scoped>
.wrap{
    transition: none;
    width: 4.29rem;
    height: 9.26rem;
    background-color: #fbfff4;;
    .header{
        position: relative;
        background-color: #6fa11e;
        height: 0.88rem;
        text-align: center;
        border: 0.01rem solid rgba(187, 187, 187, 1);
        p{
            position: absolute;
            top:0.50rem;
            left: 1.94rem;
            font-size: 0.2rem;
            font-family: Microsoft YaHei, Microsoft YaHei-Normal;
            color: #ffffff;
        }
        /* 更多 */
        a{
            position: absolute;
            color:white;
            font-size: 0.28rem;
            top:0.3rem;
            right: 0.2rem;
            width: 0.28rem;
            height: 0.28rem;
        }
    }

    .msgList{
        a{
                display: block;
                width: 4.02rem;
                height: 1.27rem;
                background-color:  white;
                margin-left: 0.13rem;
                margin-top:0.07rem;
                border-radius: 20px;
                box-shadow:  0px 3px 6px 0px rgba(0,0,0,0.15); 
            }
        }   
        a:first-of-type{
                margin-top:0.18rem;
        }  
    }

    /* 提示 */
    .tip{
        background-color: rgba(238, 255, 216, 1);;
        text-align: center;
        p{
            
            font-size: 0.14rem;
            color: rgba(169, 169, 169, 1);
            padding:0.15rem 0rem;

        }
    }

    /* 占位盒子 */
    .placeHolder{
        height: 0.63rem;;
    }

</style>